<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="98px">
      <el-form-item class="form-item-height" label="统计日期" style="width: 308px;">
        <el-date-picker
            v-model="queryParams.queryDay"
            value-format="YYYY-MM"
            type="month"
            placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="设备编码" prop="machineNo">
        <el-input
            v-model="queryParams.machineNo"
            placeholder="请输入设备编码"
            clearable
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="machineName">
        <el-input
            v-model="queryParams.machineName"
            placeholder="请输入设备名称"
            clearable
        />
      </el-form-item>
      <el-form-item label="周期" prop="period">
        <el-select v-model="queryParams.period"
                   placeholder="请选择周期"
                   clearable
                   style="width: 250px">
          <el-option label="全部" value="A"/>
          <el-option label="月" value="M"/>
          <el-option label="周" value="W"/>
          <el-option label="日" value="D"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getData">搜索</el-button>

        <el-button type="primary" icon="Search" @click="exportTableFunc">导出</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="tablebox">
      <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5" id="proresstable" v-loading="loading">
        <thead>
        <tr>
          <td colspan="4" rowspan="3" leftTop="true"></td>
          <td class="weight" v-for="(item,index) in monthtype" :colspan="item.colspan" :key="index">{{ item.month }}
          </td>
        </tr>
        <tr>
          <td class="weight" v-for="(item,index) in weektype" :colspan="item.colspan" :key="index">{{ item.week }}</td>
        </tr>
        <tr>
          <td class="weight" v-for="(item,index) in daytype" :key="index">{{ item }}</td>
        </tr>
        </thead>
        <tbody ref="tbbody">
        <table-body
            v-for="(dataitem,index) in records"
            :key="index"
        >
          <td :rowspan="rowspanNumber" class="weight processname">{{ dataitem.machineNo }}</td>
          <td :rowspan="rowspanNumber" class="weight processname">{{ dataitem.machineName }}</td>
          <tr v-for="(value,keyitem) in datakey" :key="value" :datatype="dataitem.name" v-if="showMonth">
            <td class="weight">月</td>
            <td class="weight">{{ value }}</td>
            <td v-for="(item,key) in dataitem.monthdata" :colspan="item.colspan" :key="key" class="data">
              {{ item[keyitem] }}
            </td>
          </tr>
          <tr v-for="(value,keyitem) in datakey" :key="value" :datatype="dataitem.name" v-if="showWeek">
            <td class="weight">周</td>
            <td class="weight">{{ value }}</td>
            <td v-for="(item,key) in dataitem.weekdata" :colspan="item.colspan" :key="key" class="data">
              {{ item[keyitem] }}
            </td>
          </tr>
          <tr v-for="(value,keyitem) in datakey" :key="value" :datatype="dataitem.name" v-if="showDay">
            <td class="weight">日</td>
            <td class="weight">{{ value }}</td>
            <td v-for="(item,key) in dataitem.daydata" :key="key" class="data">
              {{ item[keyitem] }}
            </td>
          </tr>
        </table-body>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup name="EquipException">
import {computed, getCurrentInstance, onMounted, reactive, ref, toRefs} from 'vue';
const {proxy} = getCurrentInstance();
import * as XLSX from 'xlsx';
import TableBody from './components/EquipmentExceptionCom.vue'
import request from "@/utils/request";
import * as allData from './components/sj.json';

const records = ref({})
const datakey = ref({})
const monthtype = ref([])
const weektype = ref([])
const daytype = ref([])
const loading = ref(true);


const showMonth = ref(true)
const showWeek = ref(true)
const showDay = ref(true)

const data = reactive({
  queryParams: {
    queryDay: "",
    machineNo: "",
    machineName: "密封",
    period: "A"
  },
});

const {queryParams} = toRefs(data);


const rowspanNumber = computed(() => {

  let num = 1;

  if (queryParams.value.period === 'A') {
    showMonth.value = true;
    showWeek.value = true;
    showDay.value = true;
  } else if (queryParams.value.period === 'M') {
    showMonth.value = true;
    showWeek.value = false;
    showDay.value = false;
  } else if (queryParams.value.period === 'W') {
    showMonth.value = false;
    showWeek.value = true;
    showDay.value = false;
  } else if (queryParams.value.period === 'D') {
    showMonth.value = false;
    showWeek.value = false;
    showDay.value = true;
  }


  if (showDay.value) {
    num = num + 7
  }
  if (showWeek.value) {
    num = num + 7
  }
  if (showMonth.value) {
    num = num + 7
  }
  return num
})

function listEquipExcetion(query) {
  return request({
    url: `/report/report/busireport/queryEquipmentException`,
    method: 'post',
    data: query,
    timeout: 60000
  })
}

const getData = () => {
  let maxmonth = 0 // 用与比较月数据长度
  let maxmonthindex = 0 // 记录最长月数据下标
  let maxmontharr = [] // 放置所有的月份
  let maxweek = 0 // 用于比较周数据长度
  let maxweekindex = 0 // 记录最长周数据下标
  let maxweekarr = [] // 放置所有的周
  let maxday = 0 // 用于比较天数据长度
  let maxdayindex = 0 // 记录最长天数据下标
  let maxdayarr = [] // 放置所有的天


  if (queryParams.value.queryDay == '') {
    proxy.$modal.msgError('请选择统计日期');
    return;
  }


  loading.value = true;

  // console.log("queryParams.value" + JSON.stringify(queryParams.value))

  records.value = allData.data

  allData.data.forEach((val, index) => {
    if (val.monthdata.length > maxmonth) {
      maxmonth = val.monthdata.length
      maxmonthindex = index
    }
    if (val.weekdata.length > maxweek) {
      maxweek = val.weekdata.length
      maxweekindex = index
    }
    if (val.daydata.length > maxday) {
      maxday = val.daydata.length
      maxdayindex = index
    }
  })
  // 存放最长数据
  allData.data[maxmonthindex].monthdata.forEach(val => {
    maxmontharr.push({month: `${val.year}年${val.month}月`, colspan: val.colspan})
  })
  allData.data[maxweekindex].weekdata.forEach(val => {
    maxweekarr.push({week: val.week, colspan: val.colspan})
  })
  allData.data[maxdayindex].daydata.forEach(val => {
    maxdayarr.push(val.month + '-' + val.day)
  })
  monthtype.value = [...maxmontharr]
  weektype.value = [...maxweekarr]
  daytype.value = [...maxdayarr]

  datakey.value = allData.itemName


}

onMounted(() => {

})


const exportTableFunc = () => {

  const wb = XLSX.utils.table_to_book(document.getElementById("proresstable"))
  XLSX.writeFile(wb, `表格数据.xlsx`)


  // const wbout = XLSX.write(wb, {
  //   bookType: "xlsx",
  //   bookSST: true,
  //   type: "array",
  // });
  // try {
  //   FileSaver.saveAs(
  //       new Blob([wbout], {type: "application/octet-stream"}),
  //       "表格数据.xlsx"
  //   );
  // } catch (e) {
  //   if (typeof console !== "undefined") console.log(e, wbout);
  // }
}


</script>

<style scoped>
thead {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
}

td {
  min-width: 50px;
  max-width: 150px;
  text-align: center;
  width: auto;
  white-space: nowrap;
  padding: 5px;
}

td:hover {
  background-color: rgb(187, 187, 187);
}

tr:hover {
  background-color: rgb(238, 238, 238);
}

table {
  table-layout: fixed;
  word-break: break-all;
}

.tablebox {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.tablebox::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tablebox::-webkit-scrollbar-thumb {
  background-color: rgb(156, 156, 156);
  border-radius: 4px;
}

.weight {
  font-weight: 600;
  color: rgb(91, 91, 91);
}

.processname {
  writing-mode: tb-rl;
}

.el-checkbox {
  margin: 0 5px;
}

.data {
  align-content: center;
}
</style> -->
